<html>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<head>
<title>Section 1.3.&nbsp; Integrating Many Sources of Information</title>
<link rel="STYLESHEET" type="text/css" href="images/style.css">
<link rel="STYLESHEET" type="text/css" href="images/docsafari.css">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><div STYLE="MARGIN-LEFT: 0.15in;">
<a href=learnphpmysql-CHP-1-SECT-2.html><img src="images/prev.gif" width="60" height="17" border="0" align="absmiddle" alt="Previous Page"></a>
<td align="right"><div STYLE="MARGIN-LEFT: 0.15in;">
<a href=learnphpmysql-CHP-1-SECT-4.html><img src="images/next.gif" width="60" height="17" border="0" align="absmiddle" alt="Next Page"></a>
</div></td></tr></table>
<br><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top"><a name="learnphpmysql-CHP-1-SECT-3"></a>
<h3 id="title-IDAKDMAJ" class="docSection1Title">1.3. Integrating Many Sources of Information</h3>
<p class="docText">In the early days of the Web, life was simple. There were files that contained HTML and binary files such as images. Several technologies have since been developed to organize the look of web pages. For example, <span class="docEmphasis">Cascading Style Sheets</span> (CSS) pull presentation information out of your HTML and into a single spot so that you can make formatting changes across an entire set of pages all at once; you don't have to manually change your HTML markup one HTML page at a time.</p>
<p class="docText">You can potentially have information coming from HTML files that reference CSS, PHP templates, and a MySQL database all at once. PHP templates make it easier to change the HTML in a page when it contains fields populated by a database query. We'll briefly discuss each of these information sources.</p>
<a name="learnphpmysql-CHP-1-SECT-3.1"></a>
<h4 id="title-IDAXDMAJ" class="docSection2Title">1.3.1. MySQL Database</h4>
<p class="docText">MySQL is a relational database management system that stores data in separate tables rather than putting all the data in one spot. This adds flexibility, as well as speed. The SQL part of MySQL stands for <span class="docEmphasis">Structured Query Language</span>, which is the most common language used to access every type of database in existence. Just to give you a taste of what your code will look like, <a class="docLink" href="#learnphpmysql-CHP-1-EX-1">Example 1-1</a> is an example of MySQL code called from PHP for deleting a user from the MySQL database.</p>
<a name="learnphpmysql-CHP-1-EX-1"></a><h5 id="title-IDAHEMAJ" class="docExampleTitle">Example 1-1. A PHP function to delete a user from the user_name database table</h5><p><table cellspacing="0" width="90%" border="1" cellpadding="5"><tr><td>

<pre>
&lt;?php

// A function to delete a user from the site_user table based on
//the $user_name parameter.
// An open database connection is assumed

function remove_user($user_name){
    // Remove a User
    // This is the SQL command
    $sql_delete = "DELETE FROM `site_user` WHERE `User`='$user'";
    $success = mysql_query($sql_delete) or die(mysql_error());

    // print the page header
    print('
        &lt;html&gt;
            &lt;head&gt;
                &lt;title&gt;Remove User&lt;/title&gt;
                &lt;link rel="stylesheet" type="text/css" href="user_admin.css" /&gt;
            &lt;/head&gt;
            &lt;body&gt;
                &lt;div class="user_admin"&gt;');

    // Check to see if the deletion was sucessful
    if ($success){
        // Tell the user it was sucessful
        print("The account for $user_name was deleted successfully.");
    }
    else {
        // Tell the user it was not sucessful
        print("User $user could not be deleted. Please try again later.");
    }

    // Print the page footer
    print('&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;');
}

?&gt;
</pre><BR>
</td></tr></table></P>
<p class="docText">Don't worry about understanding precisely what's happening in <a class="docLink" href="#learnphpmysql-CHP-1-EX-1">Example 1-1</a>. The idea is simply to realize that there's PHP code, database code, and a link to a stylesheet.</P>

<a name="learnphpmysql-CHP-1-SECT-3.2"></a>
<h4 id="title-IDAYEMAJ" class="docSection2Title">1.3.2. PHP Templates</H4>
<a name="IDX-CHP-1-0032"></a> 
<a name="IDX-CHP-1-0033"></a> 

<p class="docText">To simplify the maintenance of sites that have many different pages, but that all have a common look, the header and footer of each page can be placed in a separate file and included in each PHP page. This allows changes to the header or footer to be made in one location, but not to change the look of every page automatically, which frees the developer from having to modify every single page on the web site.</p>
<p class="docText">PHP developers have learned that separating the PHP code from HTML can make life easier for both developers and business users who know how to modify HTML but don't understand PHP very well. By creating separate PHP template files that have placeholders for dynamic data, you can separate the HTML markup from the PHP code.</p>
<p class="docText"><a class="docLink" href="#learnphpmysql-CHP-1-EX-2">Example 1-2</a> shows an example template file.</p>
<a name="learnphpmysql-CHP-1-EX-2"></a><H5 id="title-IDATFMAJ" class="docExampleTitle">Example 1-2. A PHP template</h5><p><table cellspacing="0" width="90%" border="1" cellpadding="5"><TR><td>

<pre>
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;My Books&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;Favorite Books:&lt;/p&gt;
        &lt;p&gt;
            Title: {<b>$title</b>}&lt;br /&gt;
            Author: {<B>$author</b>}
        &lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre><br>

</td></tr></table></p>
<p class="docText">When the page is processed by the PHP engine, the placeholders are replaced with their associated values, as shown in <a class="docLink" href="#learnphpmysql-CHP-1-EX-3">Example 1-3</a>.</P>
<a name="learnphpmysql-CHP-1-EX-3"></a><H5 id="title-IDAJGMAJ" class="docExampleTitle">Example 1-3. The resulting HTML code after template substitution and processing</h5><p><table cellspacing="0" width="90%" border="1" cellpadding="5"><tr><td>

<pre>
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;My Books&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;Favorite Books:&lt;/p&gt;
        &lt;p&gt;
            Title: Java in a Nutshell&lt;br /&gt;
            Author: <B>Flanagan</b>
        &lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre><br>

</TD></tr></table></P>
<p class="docText">The result is that while you've added another file to the mix, you've made the HTML markup easier to read, and the PHP code is less cluttered with extraneous HTML. A web developer who's not skilled in PHP can modify the look of the page without worrying about breaking the PHP code.</P>
<p class="docText">The last type of information we discuss also comes from a desire to separate the presentation styles such as colors and spacing from the core content.</P>

<a name="learnphpmysql-CHP-1-SECT-3.3"></a>
<h4 id="title-IDA0GMAJ" class="docSection2Title">1.3.3. Cascading Style Sheets</h4>
<a name="IDX-CHP-1-0034"></a> 

<p class="docText"><span class="docEmphasis">Cascading Style Sheets</span> (CSS) are added to HTML to give web developers and users more control over the way their web pages display. Designers and users can create stylesheets that define how different elements, such as headers and links, appear on the web site. The term <span class="docEmphasis">cascading</span> derives from the fact that multiple stylesheets can be applied to the same web page. To apply CSS code, the example code shown is placed within the head of your HTML file.</p>
<pre>
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;CSS Example&lt;/title&gt;
        &lt;style type="text/css"&gt;
            h4, b {color: #80D92F; font-family: arial; }
            p { text-indent: 2cm; background: yellow; font-family: courier;}
        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;h3&gt;Learn how to use CSS on your websites!&lt;/h3&gt;
        &lt;h4&gt;It's cool, it's amazing, it even saves you time!&lt;/h4&gt;
        &lt;p&gt;Isn't this &lt;b&gt;nifty&lt;/b&gt;?&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre><br>

<p class="docText">The code that begins with <tt>style</tt> is the CSS code. The document renders as shown in <a class="docLink" href="#learnphpmysql-CHP-1-FIG-1">Figure 1-1</a>.</p>
<a name="learnphpmysql-CHP-1-FIG-1"></a><p><center>
<h5 class="docFigureTitle">Figure 1-1. CSS and HTML displayed in your browser</h5>
<img border="0" alt="" width="549" height="237" SRC="images/learnphpmysql_0101.jpg">
</center></p><br>
<p class="docText">Although we include the CSS in the file in this example, it could come from a separate file as it did in <a class="docLink" href="#learnphpmysql-CHP-1-EX-1">Example 1-1</a> as <span class="docEmphasis">user_admin.css</span>.</p>
<p class="docText">Of course, we also have plain old HTML files in the mix, too.</p>
<p><table border="0" bgcolor="black" cellspacing="0" cellpadding="1" width="90%" align="center"><tr><TD><table bgcolor="white" width="100%" border="0" cellspacing="0" cellpadding="6"><tr><td width="60" valign="top"><img src="images/tip_yellow.jpg" width="50" height="54" alt=""></TD><TD valign="top">
<p class="docText">For more information on CSS, see Eric Meyer's <span class="docEmphasis">Cascading Stylesheets: The Definitive Guide</span>, Second Edition (O'Reilly, 2004).</p>
</TD></tr></table></td></tr></table></P><br>

<a name="learnphpmysql-CHP-1-SECT-3.4"></a>
<h4 id="title-IDA2IMAJ" class="docSection2Title">1.3.4. HTML Markup</H4>
<a name="IDX-CHP-1-0035"></a> 

<p class="docText">HTML markup<a name="IDX-CHP-1-0036"></a> 
 applies <span class="docEmphasis">tags</span> to content to identify information that is of a particular type, or that needs special formatting. HTML tags are always enclosed in angle brackets (<tt>&lt;&gt;</tt>) and are case-insensitive; so it doesn't matter if you type in upper- or lowercase (though XHTML recommends all lowercase). Tags typically occur in begin-end pairs. These pairs are in the form</p>
<pre>
&lt;tag&gt;Isn't this nifty?&lt;/tag&gt;
</pre><br>

<p class="docText">The first <tt>&lt;tag&gt;</tt> indicates the beginning of a tag-pair, and the last <tt>&lt;/tag&gt;</tt> indicates the end. This complete pair of tags is called an element. Any content within an element has the rules of that element applied to it. In the earlier example, the text "Learn how to use CSS on your websites!" is contained by an <tt>H3</tt> element.</p>
<pre>
&lt;h3&gt;Learn how to use CSS on your websites!&lt;/h3&gt;
</pre><br>

<p class="docText">It's also good practice (and it's required by XHTML) that your tags nest cleanly to produce elements with clear boundaries. Always use end tags when you reach the end of an element, and avoid having pairs of tags that overlap. (Instead of <tt>&lt;b&gt;bold &lt;i&gt;bold italic&lt;/b&gt; italic&lt;/i&gt;</tt>, write <tt>&lt;b&gt;bold &lt;i&gt;bold italic&lt;/i&gt;&lt;/b&gt; &lt;i&gt;italic&lt;/i&gt;</tt>, for example.)</p>


<a href="11011536.html"><img src="images/pixel.jpg" alt="" width="1" height="1" border="0"></a></TD></TR></table>
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><div STYLE="MARGIN-LEFT: 0.15in;">
<a href=learnphpmysql-CHP-1-SECT-2.html><img src="images/prev.gif" width="60" height="17" border="0" align="absmiddle" alt="Previous Page"></a>
<td align="right"><div STYLE="MARGIN-LEFT: 0.15in;">
<a href=learnphpmysql-CHP-1-SECT-4.html><img src="images/next.gif" width="60" height="17" border="0" align="absmiddle" alt="Next Page"></a>
</div></td></tr></table>
<script type="text/javascript"><!--
google_ad_client = "pub-0203281046321155";
google_alternate_ad_url = "http://www.bookhtml.com/adbrite.htm";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel ="4867465545";
google_color_border = "FFFFFF";
google_color_link = "0000FF";
google_color_bg = "FFFFFF";
google_color_text = "000000";
google_color_url = "0000FF";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</html>
